<template>
    <div class="SceneRoomInfo">
        <div>
            <div class="Lvie-cl-de-con">
                <div class="Lvie-cl-de-con-head">
                    <div class="Lvie-cl-de-selel-langu">
                        <span>语言</span>
                        <el-select @change ="getclasslist()" v-model="value" filterable placeholder="请选择语言">
                            <el-option
                                v-for="(item,index) in options"
                                :key="index"
                                :label="item.name"
                                :value="item.spell">
                            </el-option>
                        </el-select>
                    </div>
                    <!-- 场景直播没有年龄选项 -->
                    <!-- <ul>
                        <li v-for="(item,index) in LiveSelectList" :key="index" @click="LiveSelect(index)" :class="LiveSelectListIndex==index?'Lvie-cl-de-con-select':''">{{item}}</li>
                    </ul> -->
                </div>
                <div class="Lvie-cl-de-con-con">
                    <ul v-if="LiveSelectListIndex==0">
                        <li v-for="(item,index) in DetailsClassroomList" :key="index" @click="Toclass(item)">
                            <div class="Lvie-cl-de-con-con-img">
                                <img :src="item.faceUrl"/>
                            </div>
                            <div class="Classidentifications">
                                <img src="/images/LIVE.png"/>
                                <span>{{item.age_grade}}·{{item.language_level}}</span>
                            </div>
                            <div class="Lvie-cl-de-con-con-con">
                                <p>{{item.group_name}}</p>
                                <p>{{item.language}}</p>
                            </div>
                        </li>
                        <li class="holder" v-for="(i,indax) in holder" :key="indax" style="cursor: auto;"></li>
                        <div v-if="DetailsClassroomList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                            </ul>
                            
                            <ul v-else-if="LiveSelectListIndex==1">
                                <li v-for="(item,index) in ageGradeList" :key="index" @click="Toclass(item)">
                                    <div class="Lvie-cl-de-con-con-img">
                                        <img :src="item.faceUrl"/>
                                    </div>
                                    <div class="Classidentifications">
                                        <img src="/images/LIVE.png"/>
                                        <span>{{item.age_grade}}·{{item.language_level}}</span>
                                    </div>
                                    <div class="Lvie-cl-de-con-con-con">
                                        <p>{{item.group_name}}</p>
                                        <p>{{item.language}}</p>
                                    </div>
                                </li>
                                <li class="holder1" v-for="(i,indax) in holder1" :key="indax" style="cursor: auto;"></li>
                                <div v-if="ageGradeList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                            </ul>
                            <ul v-else-if="LiveSelectListIndex==2">
                                <li v-for="(item,index) in ageGradeList" :key="index" @click="Toclass(item)">
                                    <div class="Lvie-cl-de-con-con-img">
                                        <img :src="item.faceUrl"/>
                                    </div>
                                    <div class="Classidentifications">
                                        <img src="/images/LIVE.png"/>
                                        <span>{{item.age_grade}}·{{item.language_level}}</span>
                                    </div>
                                    <div class="Lvie-cl-de-con-con-con">
                                        <p>{{item.group_name}}</p>
                                        <p>{{item.language}}</p>
                                    </div>
                                </li>
                                <li class="holder1" v-for="(i,indax) in holder1" :key="indax" style="cursor: auto;"></li>
                                <div v-if="ageGradeList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                            </ul>
                            <ul v-else-if="LiveSelectListIndex==3">
                                <li v-for="(item,index) in ageGradeList" :key="index" @click="Toclass(item)">
                                    <div class="Lvie-cl-de-con-con-img">
                                        <img :src="item.faceUrl"/>
                                    </div>
                                    <div class="Classidentifications">
                                        <img src="/images/LIVE.png"/>
                                        <span>{{item.age_grade}}·{{item.language_level}}</span>
                                    </div>
                                    <div class="Lvie-cl-de-con-con-con">
                                        <p>{{item.group_name}}</p>
                                        <p>{{item.language}}</p>
                                    </div>
                                </li>
                                <li class="holder1" v-for="(i,indax) in holder1" :key="indax" style="cursor: auto;"></li>
                                <div v-if="ageGradeList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                            </ul>
                            <ul v-else-if="LiveSelectListIndex==4">
                                <li v-for="(item,index) in ageGradeList" :key="index" @click="Toclass(item)">
                                    <div class="Lvie-cl-de-con-con-img">
                                        <img :src="item.faceUrl"/>
                                    </div>
                                    <div class="Classidentifications">
                                        <img src="/images/LIVE.png"/>
                                        <span>{{item.age_grade}}·{{item.language_level}}</span>
                                    </div>
                                    <div class="Lvie-cl-de-con-con-con">
                                        <p>{{item.group_name}}</p>
                                        <p>{{item.language}}</p>
                                    </div>
                                </li>
                                <li class="holder1" v-for="(i,indax) in holder1" :key="indax" style="cursor: auto;"></li>
                                <div v-if="ageGradeList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                    </ul>
                </div>
                <div class="Lvie-cl-de-con-pagination">
                    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import citys from '../../../../public/citys/citys'
export default {
    name:'SceneRoomInfo',
    computed:{
        holder(){
            return 4 -(this.DetailsClassroomList.length%4)
        },
        holder1(){
            return 4 -(this.ageGradeList.length%4)
        }
    },
    data(){
        return{
            Ismember:false,
            dd:true,
            LiveSelectList:['推荐','儿童','少年','大学生','成年'],
            LiveSelectListIndex:0,
            DetailsClassroomList:[],
            options:[],
            value: '',
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"Polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            currentPage:1,
            thisindex:this.$route.query.index,
            ageGradeList:[],
        }
    },
    mounted() {
        this.getCitiesList()
        this.getclasslist()
    },
    methods: {
        getCitiesList(){
            for(let x in citys.cities){
                citys.cities[x].map(item=>{
                    this.options.push(item)
                })
            }
            console.log(this.options,'组装后的')
        },
        Toclass(item){
             console.log(item,'???')
            var str = item.type
            // str = str.split("_")[1]
            console.log(str,'=>>')
            if(item.type == 'online_voice' | item.type == 'realtime_voice'){
                if(item.map.userinfo.user_id == this.unserinfo.user_id){
                    this.$router.push({path:'/views/Voicebroadcast',query:{item: JSON.stringify(item),isscenario:true}})
                }else{
                    this.$router.push({path:'/views/Studentvoice',query:{item: JSON.stringify(item),isscenario:true}})
                }
            }else{
                if(item.map.userinfo.user_id == this.unserinfo.user_id){
                    this.$router.push({path:'/views/LivevideoRoom',query:{item: JSON.stringify(item),isscenario:true}})
                }else{
                    this.$router.push({path:'/views/StudentbroadcastVideproom',query:{item: JSON.stringify(item),isscenario:true}})
                }
                
            }
        },
        LiveSelect(e){
            this.LiveSelectListIndex = e
            this.getClassAge()
        },
        getClassAge(){
            var _this = this,age
            _this.ageGradeList = []
            if(this.LiveSelectListIndex == 1){
                age = 'Childhood'
            }else if(this.LiveSelectListIndex == 2){
                age = 'Teenagers'
            }else if(this.LiveSelectListIndex == 3){
                age = 'University Student'
            }else if(this.LiveSelectListIndex == 4){
                age = 'Adult'
            }
            var data ={
                currentPage:_this.currentPage,
                pageSize:16,
                language:_this.value,
                age_grade:age
            }
            _this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/messageGroup/queryListPage',
                params:data,
                }).then((res) =>{ 
                    _this.ageGradeList = res.data.data
                    _this.ageGradeList.forEach(function(i){
                        var days = _this.dateDiff(i.start_time)[0]
                        if(days>0){
                            i.days = _this.dateDiff(i.start_time)[0]
                            i.hours =0
                            i.minutes =0
                        }else if(days==0&_this.dateDiff(i.start_time)[1]>0){
                            i.days = 0
                            i.minutes =0
                            i.hours = _this.dateDiff(i.start_time)[1]
                            
                        }else if(_this.dateDiff(i.start_time)[1] == 0){
                            i.days = 0
                            i.hours =0
                            i.minutes = _this.dateDiff(i.start_time)[2]
                        }else if(_this.dateDiff(i.start_time)[2] ==0){
                            i.Isend = 1 
                        }else{
                            i.Isend = 0
                        }
                        
                        if(i['age_grade'] == "Teenagers"){
                            i['age_grade']='青少年'
                        }else if(i['age_grade'] == "Childhood"){
                            i['age_grade']='儿童'
                        }else if(i['age_grade'] == "University Student"){
                            i['age_grade']='大学生'
                        }else if(i['age_grade'] == "Adult"){
                            i['age_grade']='成年'
                        }
                        
                        if(i['language_level'] == "Zero basis"){
                            i['language_level']='零基础'
                        }else if(i['language_level'] =="Senior"){
                            i['language_level']='高级'
                        }else if(i['language_level'] =="Intermediate"){
                            i['language_level']='中级'
                        }else if(i['language_level'] =="Primary"){
                            i['language_level']='初级'
                        }
                        _this.languageEn.forEach(function(j){
                            if(j[i['language']]){
                                i['language']=j[i['language']]
                            }
                        })
                        _this.Thetheme.forEach(is=>{
                            if(is[i['title']]){
                                i['title'] = is[i['title']]
                            }
                        })
                    });
                    console.log(_this.ageGradeList,'aaa')
                }).catch((error) =>{
                console.log(error)
            })
        },
        getclasslist(){
            var _this = this
            _this.DetailsClassroomList = []
            var data ={
                currentPage:_this.currentPage,
                pageSize:16,
                language:_this.value
            }
            _this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/message/messageGroup/queryListPage',
                params:data,
            }).then((res) =>{ 
                _this.DetailsClassroomList = res.data.data
                _this.ChildhoodList = []
                _this.TeenagersList = []
                _this.UniversityList = []
                _this.AdultList = []
                _this.DetailsClassroomList.forEach(function(i){
                    if(i['age_grade'] == "Teenagers"){
                        i['age_grade']='青少年'
                    }else if(i['age_grade'] == "Childhood"){
                        i['age_grade']='儿童'
                    }else if(i['age_grade'] == "University Student"){
                         i['age_grade']='大学生'
                    }else if(i['age_grade'] == "Adult"){
                        i['age_grade']='成年'
                    }                       
                    if(i['language_level'] == "Zero basis"){
                        i['language_level']='零基础'
                    }else if(i['language_level'] =="Senior"){
                        i['language_level']='高级'
                    }else if(i['language_level'] =="Intermediate"){
                        i['language_level']='中级'
                    }else if(i['language_level'] =="Primary"){
                        i['language_level']='初级'
                    }
                     _this.languageEn.forEach(function(j){
                        if(j[i['language']]){
                            i['language']=j[i['language']]
                        }                           
                    })
                    if(i['age_grade'] =='儿童'){
                            _this.ChildhoodList.push(i)
                        }
                        if(i['age_grade'] == '青少年'){
                            _this.TeenagersList.push(i)
                        }
                        if(i['age_grade'] == '大学生'){
                            _this.UniversityList.push(i)
                        }
                        if(i['age_grade'] == '成年'){
                            _this.AdultList.push(i)
                        }
                });
            }).catch((error) =>{
                console.log(error)
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getclasslist()
            this.getClassAge()
        }
    }
}
</script>
<style lang="less" scoped>
.holder1,.holder{
    position: relative;
    width: 24%;
    height: auto;
    max-height: 280px;
    border-radius: 15px;
    overflow:hidden;
    margin-top: 40px;
    // height: 260px;
    opacity: 0;
}
    .SceneRoomInfo{
        position: relative;
        background: #ffffff;
        border-radius: 20px;
    }
    .Noclass{
        position: relative;
        width: 90%;
        margin: 0 auto;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        .noClassimg{
            width: 65px;
            height: 55px;
        }
    }
    .Noclass>label{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .Noclass>label>span{
        display: block;
        width: 100%;
        text-align: center;
        font-size: 18px;
        color: #d8d8d8;
        margin-top: 10px;
    }
/*内容样式*/
.Lvie-cl-de-con{
    position: relative;
    // width: 100%;//有左侧导航状态
    width: 116%;//五左侧导航状态
    background: #ffffff;
    border-radius: 15px;
}
.Lvie-cl-de-con-head{
    position: relative;
    width: 100%;
    height: 80px;
    display: flex;
    border-bottom: 1px solid #47CECF;
    ul{
        list-style: none;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: flex-end;
        li{
            width: 10%;
            cursor: pointer;
        }
    }
}
.Lvie-cl-de-selel-langu{
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
    span{
        color: #C2C2C2;
        font-size: 14px;
    }
    /deep/.el-select{
        width: 50%;
        margin-left: 2%;         
    }
    /deep/.el-input__inner{
        border-radius: 20px;
        border: 1px #47CECF solid;
        font-weight: bold;
        color: #47CECF;
    }
}
.Lvie-cl-de-con-select{
    color: #47CECF;
    font-weight: bold;
}
.Lvie-cl-de-con-con{
    position: relative;
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    ul{
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0%;
        li{
            position: relative;
            width: 24%;
            max-height: 240px;
            cursor: pointer;
            border-radius: 15px;
            overflow:hidden;
            margin-top: 40px;
            border: 1px solid #e7e7e7;
        }
    }
}
.Lvie-cl-de-con-con>ul>li:hover{
    box-shadow: 2px 14px 6px rgba(0, 0, 0, 0.1);
}
.Lvie-cl-de-con-con-img{
    width: 100%;
    height: 70%;
    overflow: hidden;
    img{
        width: 100%;
        height: auto;
    }
}
.Classidentifications{
    display: flex;
    align-items: center;
    height: 32px;
    width: 100%;
    position: absolute;
    top: 5%;
    img{
        margin-left: 5%;
        margin-top: -14%;
    }
    span{
        margin-left: auto;
        width: 88px;
        align-items: center;
        height: 32px;
        font-size: 12px;
        text-align: center;
        line-height: 32px;
        color: #00B6B7;
        background: #ffffff;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
}
.Lvie-cl-de-con-con-con{
    position: relative;
    width: 90%;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    padding: 0;
    p{
        padding: 0;
        margin: 0px;
        height:30px;
        line-height: 30px;
        &:first-child{
            font-weight: bold;
            font-size: 16px;
        }
        &:last-child{
            color: 14px;
            color: #FF5757;
        }
    }
}
.Lvie-cl-de-con-con-auditions{
    float: right;
    width:83px;
    height:33px;
    border:1px solid rgba(71,206,207,1);
    border-radius:20px;
    line-height: 33px;
    color: #47CECF;
    text-align: center;
    background-image: url("/images/多边形 2 拷贝.png");
    background-repeat: no-repeat;
    background-position: 93%;
    padding-left:0px;
}
.Lvie-cl-de-con-pagination{
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: 100px;
    display: flex;
    justify-content: flex-end;
    margin-right: 100px;
}
.Lvie-cl-de-con-footer{
    background: #ffffff;
}
/*底部刷新按钮*/
.refresh{
    position: fixed;
    right: 1%;
    bottom: 40px;
    cursor: pointer;
}
</style>